import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import MyNavLink from '../componments/MyNavLink'
import MessageDetail from './MessageDetail'
export default class Message extends Component {
  state = {
    messages: [],
  }
  componentDidMount() {
    //模拟发送ajax 请求异步获取数据
    setTimeout(() => {
      const messages = [
        { id: 1, title: 'message001' },
        { id: 2, title: 'message002' },
        { id: 3, title: 'message003' },
      ]
      this.setState({ messages })
    }, 1000)
  }
  showDetail = (id) => {
    this.props.history.push('/home/message/messagedetail/' + id)
  }
  showDetail2 = (id) => {
    this.props.history.replace('/home/message/messagedetail/' + id)
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.messages.map((msg, index) => (
            <li key={index}>
              <MyNavLink to={`/home/message/messagedetail/${msg.id}`}>
                {msg.title}
              </MyNavLink>
              &nbsp;&nbsp;
              <button onClick={() => this.showDetail(msg.id)}>
                {' '}
                push 查看
              </button>
              &nbsp;&nbsp;
              <button onClick={() => this.showDetail2(msg.id)}>
                {' '}
                replace 查看
              </button>
            </li>
          ))}
        </ul>
        <Route
          path="/home/message/messagedetail/:id"
          component={MessageDetail}
        />
      </div>
    )
  }
}
